<!-- 新增/编辑 组织机构 -->
<template>
  <a-modal v-model:visible="visible" width="45vw" title="交/还车人" unmount-on-close>
    <page-form class="page-form" :model="form" :label-col-props="{ span: 10 }" :wrapper-col-props="{ span: 14 }">
      <!-- ota未匹配启程系统员工 -->
      <page-form-row :gutter="24" v-if="form.giveStaffName && !form.giveStaffId">
        <page-form-item size="2/3" :label-col-props="{ span: 7 }" style="margin-bottom: 0">
          <div>{{ form.giveStaffName }}（无法匹配）</div>
        </page-form-item>
      </page-form-row>

      <page-form-row :gutter="24">
        <page-form-item field="giveStaffId" label-align="right" label="交车人" size="2/3" :label-col-props="{ span: 7 }">
          <remote-select
            v-model="form.giveStaffId"
            :disabled="!staffDisable.staff"
            :params="{ oldId: form.giveStaffId, siteIdList: [orderInfo.siteId] }"
            type="get_car_house_keeper"
            popup-container="#app"
            :updateAtScroll="true"
          />
        </page-form-item>
        <page-form-item size="1/3" />
      </page-form-row>
      <page-form-row :gutter="24" v-if="orderInfo.giveStaffStatus || (orderInfo.workOrderList && orderInfo.workOrderList[0]?.workOrderNo)">
        <page-form-item label-align="right" label="交车工单状态" size="1/2">
          <span :class="getStatusClassName(orderInfo.giveStaffStatus)">
            {{ orderInfo.giveStaffStatusName }}
          </span>
        </page-form-item>
        <page-form-item label-align="right" label="交车工单号" size="1/2">
          {{ orderInfo.workOrderList[0]?.workOrderNo }}
        </page-form-item>
      </page-form-row>
      <page-form-row :gutter="24" v-if="orderInfo.workOrderList && orderInfo.workOrderList[0]?.refuseReason">
        <page-form-item label-align="right" label="拒绝原因" size="1" :label-col-props="{ span: 5 }" :wrapper-col-props="{ span: 19 }">
          {{ orderInfo.workOrderList[0].refuseReason }}
        </page-form-item>
      </page-form-row>

      <a-divider class="mt-0" />
      <!-- ota未匹配启程系统员工 -->
      <page-form-row :gutter="24" v-if="form.returnStaffName && !form.returnStaffId">
        <page-form-item size="2/3" :label-col-props="{ span: 7 }" style="margin-bottom: 0">
          <div>{{ form.returnStaffName }}（无法匹配）</div>
        </page-form-item>
      </page-form-row>

      <page-form-row :gutter="24">
        <page-form-item field="returnStaffId" label-align="right" label="还车人" size="2/3" :label-col-props="{ span: 7 }">
          <remote-select
            v-model="form.returnStaffId"
            :disabled="!staffDisable.returnStaff"
            :params="{ oldId: form.returnStaffId, siteIdList: [orderInfo.returnSiteId] }"
            type="get_car_house_keeper"
            popup-container="#app"
            :updateAtScroll="true"
          />
        </page-form-item>
        <page-form-item size="1/3" />
      </page-form-row>
      <page-form-row
        :gutter="24"
        v-if="orderInfo.returnStaffStatus || (orderInfo.workOrderList && orderInfo.workOrderList[1]?.workOrderNo)"
      >
        <page-form-item label-align="right" label="还车工单状态" size="1/2">
          <span :class="getStatusClassName(orderInfo.returnStaffStatus)">
            {{ orderInfo.returnStaffStatusName }}
          </span>
        </page-form-item>
        <page-form-item label-align="right" label="还车工单号" size="1/2">
          {{ orderInfo.workOrderList[1]?.workOrderNo }}
        </page-form-item>
      </page-form-row>
      <page-form-row :gutter="24" v-if="orderInfo.workOrderList && orderInfo.workOrderList[1]?.refuseReason">
        <page-form-item label-align="right" label="拒绝原因" size="1" :label-col-props="{ span: 5 }" :wrapper-col-props="{ span: 19 }">
          {{ orderInfo.workOrderList[1].refuseReason }}
        </page-form-item>
      </page-form-row>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { editGiveReturnStaff } from '@/api/order/sOrder'
  import { Notification } from '@arco-design/web-vue'
  const visible = ref(false)
  const form = ref({})
  const emit = defineEmits(['ok'])
  const staffDisable = ref({})
  const orderInfo = ref({})
  const open = (record, disableConfig) => {
    orderInfo.value = record
    staffDisable.value = disableConfig
    visible.value = true
    form.value = {
      id: record.id,
      giveStaffId: record.giveStaffId,
      returnStaffId: record.returnStaffId,
      giveStaffName: record.giveStaffName,
      returnStaffName: record.returnStaffName,
    }
  }

  const getStatusClassName = (status) => {
    switch (status) {
      case 2:
        return 'success'
      case 1:
        return 'warning'
      case 3:
        return 'danger'
    }
  }

  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = () => {
    okLoading.value = true
    const param = {
      ...form.value,
    }
    editGiveReturnStaff(param)
      .then(() => {
        Notification.success('保存成功')
        visible.value = false
        emit('ok')
      })
      .finally(() => {
        okLoading.value = false
      })
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .page-form {
    min-height: 300px;
    overflow-x: hidden;
    width: 100%;
  }

  :deep(.arco-descriptions-item-label-block) {
    width: 1px !important;
  }
  :deep(.arco-descriptions-item-value-block) {
    width: auto !important;
  }

  .success {
    color: #00b42a;
  }
  .warning {
    color: #ff7d00;
  }
  .danger {
    color: #f76964;
  }
</style>
